<script setup>
import {onMounted, reactive, ref} from 'vue';
import {menu} from "@/api/menu.js"
    onMounted(() => {
      menu().then(res => {
        menus.menus = res.data
        console.log(menus)
      }).catch(err => {
        console.log(err)
      })
    })
    let menus = reactive({menus:[]})
    const props = defineProps(['isCollapse','menuActive'])
</script>

<template>
    <el-menu
    class="el-menu-vertical"
    :default-active="menuActive"
    active-text-color="#409EFF"
    background-color="#304156"
    text-color="#fff"
    router
    :collapse="props.isCollapse"
    >
        <el-menu-item index="/index">
            <el-icon style="margin-right: 9px;"><House /></el-icon>
            <span>首页</span>
        </el-menu-item>
        <el-sub-menu :index="root.id" v-for="root in menus.menus" :key="root.id">
            <template  #title v-if="root.parentId === '0'">
                <el-icon><component :is="root.icon"></component></el-icon>
                <span>{{root.name}}</span>
            </template>
            <el-menu-item v-for="child in root.children" :index="child.path" :key="child.id">
                <el-icon>
                    <component :is="child.icon"></component>
                </el-icon>
                <span>{{ child.name }}</span>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<style scoped>
    .el-menu-vertical{
        border: none !important;
        width: 100% !important;
    }
</style>
